<template class="zcTableHader-wrap">
  <el-table-column
    :sortable="data.sortable ? data.sortable : false"
    class="tableHeader-wrap"
    v-if="!data.hide"
    :min-width="data['columnMinWidth'] ? data['columnMinWidth'] : ''"
    :width="data.columnWidth ? data.columnWidth : handleColumnWidth()"
    :prop="data.value"
    :fixed="data.fixed"
    :align="data.colAlign ? data.colAlign : 'center'"
  >
    <!--    :align="data.colAlign ? data.colAlign : 'center'"-->
    <template #header>
      <div
        class="headerBox"
        :style="{
          textAlign: data.titleAlign ? data.titleAlign : 'center',
          color: data.titleColor,
        }"
      >
        {{ data.name }} <br />
        <span :style="{ color: data.titleUnitColor }">{{ data.unit }}</span>
      </div>
    </template>
    <!--    :align="data.colAlign ? data.colAlign : 'center'"-->
    <template v-if="!data.children" #default="scope">
      <el-tooltip
        :disabled="!data.showTooltip"
        placement="top"
        :open-delay="$T.isTrue(data.openDelay) ? data.openDelay : 100"
      >
        <template #content>
          <div :id="tableRowId" class="dintl-el-tooltip-wrap">
            {{ valueFormatter(scope.row) }}
          </div>
        </template>
        <!--        数字正负变色-->
        <div
          v-if="data.negative && data.negative === true"
          :class="{ 'dinlt-text-overflow-hidden': data.showTooltip }"
        >
          <p
            v-if="parseFloat(scope.row[data.value]) > 0"
            :style="{
              color: '#00d539',
              lineHeight: columnHeight ? columnHeight : '',
            }"
          >
            +{{ valueFormatter(scope.row) }}
          </p>
          <p
            v-else-if="parseFloat(scope.row[data.value]) === 0"
            :style="{
              color: data.color,
              lineHeight: columnHeight ? columnHeight : '',
            }"
          >
            {{ valueFormatter(scope.row) }}
          </p>
          <p
            v-else-if="parseFloat(scope.row[data.value]) < 0"
            :style="{
              color: 'rgba(255, 120, 0, 1)',
              lineHeight: columnHeight ? columnHeight : '',
            }"
          >
            {{ valueFormatter(scope.row) }}
          </p>
          <p v-else>{{ valueFormatter(scope.row) }}</p>
        </div>
        <!--        数字正负变色-司补-->
        <div
          v-else-if="
            data.negativeForDvrTable && data.negativeForDvrTable === true
          "
          :class="{ 'dinlt-text-overflow-hidden': data.showTooltip }"
          :style="{
            textAlign: colAlign,
          }"
        >
          <p
            v-if="scope.row[data.value].indexOf('increase') > -1"
            :style="{
              background: 'rgb(165, 204, 79)',
              lineHeight: columnHeight ? columnHeight : '',
            }"
          >
            {{ scope.row[data.value].split('_')[0] }}
          </p>
          <p
            v-else-if="scope.row[data.value].indexOf('invisible') > -1"
            :style="{
              background: 'rgb(165, 204, 79)',
              lineHeight: columnHeight ? columnHeight : '',
            }"
          ></p>
          <p
            v-else
            :style="{
              color: data.color,
              lineHeight: columnHeight ? columnHeight : '',
            }"
          >
            {{ scope.row[data.value].split('_')[0] }}
          </p>
        </div>
        <!--        点击跳转-->
        <template
          v-else-if="
            data.href && typeof data.href === 'function' && !data.heatMapColumn
          "
        >
          <!--          {{ valueFormatter(scope.row) }}-->
          <!--            // 超链接-->
          <div>
            <el-button
              :style="{
                textAlign: data.colAlign,
                width: data.columnWidth
                  ? `calc(${data.columnWidth} - 20px)`
                  : '100%',
              }"
              class="dinlt-text-overflow-hidden"
              :disabled="data.hrefDisable && data.hrefDisable(scope.row)"
              @click="data.href(scope.row)"
              type="text"
            >
              {{ valueFormatter(scope.row) }}
            </el-button>
          </div>
        </template>
        <!--        热力图-->
        <template
          v-else-if="
            data.heatMapColumn && typeof data.heatMapColumn === 'function'
          "
        >
          {{ valueFormatter(scope.row) }}
          <div
            :style="
              data.heatMapColumn(scope.row[data.value], scope.row, scope.$index)
            "
            :align="colAlign"
            :class="{ 'dinlt-text-overflow-hidden': data.showTooltip }"
          >
            <el-button
              v-if="data.href"
              :style="{
                width: '100%',
                lineHeight: '50px',
                color: data.color,
              }"
              class="dinlt-text-overflow-hidden"
              :disabled="data.hrefDisable && data.hrefDisable(scope.row)"
              @click="data.href(scope.row)"
              type="text"
            >
              {{ valueFormatter(scope.row) }}
            </el-button>
            <div
              v-else
              v-html="valueFormatter(scope.row)"
              :style="{ color: data.color, lineHeight: columnHeight }"
            ></div>
          </div>
        </template>
        <!--        单元格编辑-->
        <template v-else-if="data['inputEdit']">
          <div
            :class="
              data.colAlign === 'left'
                ? 'myDiv zcTable-input-left'
                : 'myDiv zcTable-input-center'
            "
            :style="
              data.inputEditStyle(
                scope.row[data.value],
                scope.row,
                scope.$index
              )
            "
          >
            <el-input
              resize="none"
              type="textarea"
              :autosize="{
                minRows: 1,
                maxRows: 4,
              }"
              :disabled="data['editDisable'](scope.row, data.value)"
              @change="
                data['editFunction'](scope.row, data.value, scope.$index)
              "
              v-model="scope.row[data.value]"
            />
          </div>
        </template>
        <template v-else-if="data['rowSlot']">
          <div>
            <slot name="row-slot" :opts="scope.row"></slot>
          </div>
        </template>
        <!--        默认-->
        <template v-else>
          <!--          <div :class="{ 'dinlt-text-overflow-hidden': data.showTooltip }">-->
          <div
            :class="{ 'dinlt-text-overflow-hidden': data.showTooltip }"
            :style="{
              textAlign: colAlign,
              color: data.color,
              height: columnHeight,
              lineHeight: columnHeight,
              '-webkit-line-clamp': data.lineClamp,
            }"
            v-html="valueFormatter(scope.row)"
          ></div>
          <!--          </div>-->
        </template>
      </el-tooltip>
    </template>
    <template v-if="data.children && data.children.length > 0">
      <ZcTableHeader
        v-for="(item, index) in data.children"
        :key="`${index}id`"
        :data="item"
      />
    </template>
  </el-table-column>
</template>

<script>
export default {
  name: 'ZcTableHeader',
  props: {
    columnHeight: {
      type: String,
      default: '',
    },
    data: [],
    originTableData: {
      type: Array,
      default() {
        return []
      },
    },
  },
  computed: {
    colAlign() {
      return this.data.colAlign ? this.data.colAlign : 'center'
    },
  },
  data() {
    return {
      id: this.$_.uniqueId('tableHeader'),
      tableRowId: this.$_.uniqueId('tableRowItem'),
    }
  },
  methods: {
    handleColumnWidth() {
      if (this.$T.isTrue(this.data.autoColumnWidth)) {
        let columnName = this.data.value
        if (this.originTableData.length > 0) {
          let maxWordLength = 0
          let maxWord = ''
          for (let item of this.originTableData) {
            if (item[columnName].length > maxWordLength) {
              maxWordLength = item[columnName].length
              maxWord = item[columnName]
            }
          }
          try {
            return this.getFontMaxWidth(maxWord)
          } catch (e) {
            return ''
          }
        }
      } else {
        return ''
      }
    },
    getFontMaxWidth(maxWord) {
      // 创建textArea
      // 测试 span标签
      if (this.$T.isTrue(maxWord)) {
        let maxWidthSpan = document.createElement('span')
        maxWidthSpan.textContent = maxWord
        maxWidthSpan.id = this.id + 'maxWord-span'
        maxWidthSpan.style.opacity = 0
        maxWidthSpan.style.position = 'fixed'
        document.body.appendChild(maxWidthSpan)
        setTimeout(() => {
          document.body.removeChild(maxWidthSpan) // 获取宽度后完成移除元素
        }, 3000)
        let result = maxWidthSpan.offsetWidth + 20
        if (result > 200) {
          return 200
        } else if (result < 90) {
          return 90
        } else {
          return result
        }
        // return maxWidthSpan.offsetWidth > 200
        //   ? 200
        //   : maxWidthSpan.offsetWidth + 20
      } else {
        return 150
      }
    },
    valueFormatter(row) {
      let val = row[this.data.value]
      if (this.data.formatter) {
        return this.data.formatter(val, row, this.data.value)
      } else {
        return this.$T.isTrue(val) ? val : '--'
      }
    },
    copy() {
      let elementId = document.getElementById(this.tableRowId)
      elementId.select()
      document.execCommand('Copy')
    },
  },
}
</script>

<style lang="less">
.tableHeader-wrap {
  a {
    text-decoration: none;
  }
  .table-header-collapse {
    font-size: 16px;
    max-width: 500px;
    width: fit-content;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    position: relative;
  }
}
.myDiv {
  .el-textarea__inner {
    border: none;
    color: inherit;
    background: inherit;
  }
}
.zcTable-input-left {
  .el-textarea__inner {
    text-align: left;
  }
}
.zcTable-input-center {
  .el-textarea__inner {
    text-align: center;
  }
}
</style>
